<template>
  <div style="margin: 20px; padding: 20px">

    <!--    搜索区域-->
    <div style="margin: 10px 0">
      <el-input v-model="search" placeholder="请输入会议名称" style="width: 20%" clearable />
      <el-button type="primary" style="margin-left: 5px" @click="loadLocal">查询</el-button>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column
        width="70"
        prop="id"
        label="会议ID"
        sortable
      />
      <el-table-column
        width="150"
        prop="name"
        label="会议主题"
      />
      <el-table-column
        width="160"
        prop="time"
        label="日期"
      />
      <el-table-column
        width="160"
        prop="length"
        label="会议时长"
      />
      <el-table-column prop="sub" width="400" label="会议概要">
        <el-badge value="4" class="item">
          <el-button size="small">人员</el-button>
        </el-badge>
        <el-badge value="30+" class="item">
          <el-button size="small">关键词</el-button>
        </el-badge>
        <el-badge value="6" class="item">
          <el-button size="small">子主题</el-button>
        </el-badge>
      </el-table-column>

      <el-table-column label="操作" width="240">
        <template #default="scope">
          <el-popconfirm title="确定删除吗？" @confirm="handleDeleteLocal(scope.row.id)">
            <template #reference>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin: 10px 0">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Meetings',
  components: {

  },
  data() {
    return {
      user: {},
      // loading状态
      loading: false,
      form: {},
      dialogVisible: false,
      search: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      // 数据，后期需要从后端获取
      tableData: [
        {
          id: '001',
          name: '中美会议分析',
          time: '2021.05.27',
          length: '6h',
          done: true,
          sub: {
            people: '4',
            keywords: '30+',
            subtitle: '6'
          }
        },
        {
          id: '002',
          name: '公司会议1',
          time: '2021.05.27',
          length: '1h23min',
          done: true,
          sub: {
            people: '4',
            keywords: '30+',
            subtitle: '6'
          }
        },
        {
          id: '002',
          name: '公司会议2',
          time: '2021.05.27',
          length: '1h',
          done: true,
          sub: {
            people: '4',
            keywords: '30+',
            subtitle: '6'
          }
        },
        {
          id: '002',
          name: '公司会议3',
          time: '2021.05.27',
          length: '3h',
          done: true,
          sub: {
            people: '4',
            keywords: '30+',
            subtitle: '6'
          }
        }
      ]

    }
  },
  methods: {
    // load() {
    //   this.loading = true
    //   request.get("/order", {
    //     params: {
    //       pageNum: this.currentPage,
    //       pageSize: this.pageSize,
    //       search: this.search
    //     }
    //   }).then(res => {
    //     this.loading = false
    //     this.tableData = res.data.records
    //     this.total = res.data.total
    //   })
    // },
    loadLocal() {
      alert('需请求后端服务器获取数据')
    },
    // save() {
    //   if (this.form.id) { // 更新
    //     request.put('/order', this.form).then(res => {
    //       console.log(res)
    //       if (res.code === '0') {
    //         this.$message({
    //           type: 'success',
    //           message: '更新成功'
    //         })
    //       } else {
    //         this.$message({
    //           type: 'error',
    //           message: res.msg
    //         })
    //       }
    //       this.load() // 刷新表格的数据
    //       this.dialogVisible = false // 关闭弹窗
    //     })
    //   } else { // 新增
    //     request.post('/order', this.form).then(res => {
    //       console.log(res)
    //       if (res.code === '0') {
    //         this.$message({
    //           type: 'success',
    //           message: '新增成功'
    //         })
    //       } else {
    //         this.$message({
    //           type: 'error',
    //           message: res.msg
    //         })
    //       }
    //
    //       this.load() // 刷新表格的数据
    //       this.dialogVisible = false // 关闭弹窗
    //     })
    //   }
    // },
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
      this.$nextTick(() => {
        if (this.$refs['upload']) {
          this.$refs['upload'].clearFiles() // 清除历史文件列表
        }
      })
    },
    // handleDelete(id) {
    //   console.log(id)
    //   request.delete("/order/" + id).then(res => {
    //     if (res.code === '0') {
    //       this.$message({
    //         type: "success",
    //         message: "删除成功"
    //       })
    //     } else {
    //       this.$message({
    //         type: "error",
    //         message: res.msg
    //       })
    //     }
    //     this.load()  // 删除之后重新加载表格的数据
    //   })
    // },
    handleDeleteLocal(id) {
      alert('提交到后端删除某次会议全部信息')
    },
    handleSizeChange(pageSize) { // 改变当前每页的个数触发
      this.pageSize = pageSize
      this.load()
    }
    // handleCurrentChange(pageNum) {  // 改变当前页码触发
    //   this.currentPage = pageNum
    //   this.load()
    // },

  }
  // 生命周期函数，请求相关，暂不处理
  // created() {
  //   let userStr = sessionStorage.getItem("user") || "{}"
  //   this.user = JSON.parse(userStr)
  //   // 请求服务端，确认当前登录用户的 合法信息
  //   request.get("/user/" + this.user.id).then(res => {
  //     if (res.code === '0') {
  //       this.user = res.data
  //     }
  //   })
  //
  //   this.load()
  // },
}
</script>

<style scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}

</style>
